<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>

    <style>
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: url('img/background.png') no-repeat center center;
            background-size: 95%;
            background-color: #000;
            background-attachment: fixed;
            image-rendering: pixelated;
        }

        body {
            margin: 0;
            padding: 0;
            min-height: 100%;
        }

        #top {
            height: 50px;
            width: 100%;
            background-color: #000;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 左右两端对齐 */
            padding: 0 10px;
            box-sizing: border-box;
        }

        #loge {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #loge img {
            height: 40px;
            width: 40px;
            image-rendering: pixelated;
        }

        #loge p {
            color: #d1d1d1;
            font-size: 20px;
            margin: 0;
        }

        #login {
            height: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        #login p {
            color: #d1d1d1;
            font-size: 16px;
            margin: 0;
            user-select: none;
        }

        #content {
            display: flex;
            flex-direction: column;
            padding-top: 30px;
            margin: 0 auto;
            width: 75%;
            min-height: calc(100vh - 50px);
            background-color: #2c2925;
        }

        #title {
            width: 100%;
        }

        h1 {
            font-size: 36px;
            text-align: center;
            margin: 0 0 20px 0;
            color: #d1d1d1;
        }

        .custom-line {
            border: none;
            border-top: 2px solid #d1d1d1;
            width: 90%;
            margin: 20px auto;
        }

        /* 新增：包裹 loginBox 的容器 */
        #registerWrapper {
            flex: 1; /* 占据剩余空间 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .form-group label {
            width: 70px;
            font-size: 18px;
            color: #d1d1d1;
        }

        .form-group input[type="text"],
        .form-group input[type="password"],
        .form-group input[type="file"] {
            flex: 1;
            padding: 8px;
            font-size: 16px;
            background-color: #444;
            color: #fff;
            border: 1px solid #888;
            border-radius: 5px;
        }

        .button-group {
            text-align: center;
        }

        #registerBtn {
            padding: 10px 30px;
            font-size: 18px;
            background-color: #202e63;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        #registerBtn:hover {
            background-color: #3040a0;
        }

        #registerLinks {
            display: flex;
            justify-content: flex-start;
            width: 350px;
            margin: 0 auto 30px auto;
        }

        #registerLinks a {
            color: #d1d1d1;
            text-decoration: underline;
            font-size: 16px;
            cursor: pointer;
            user-select: none;
        }

        #registerLinks a:hover {
            color: #ffcc00;
        }

    </style>
</head>
<body>
    <div id="top">
        <div id="loge">
            <img src="img/site_avatar_isaac_l.webp" alt="Isaac Wiki">
            <p>以撒的结合Wiki</p>
        </div>
        <div id="login">
            <!-- 预留登录/注册区域 -->
        </div>
    </div>
    <div id="content">
        <div id="title">
            <h1>欢迎注册以撒的结合wiki</h1>
        </div>

        <hr class="custom-line">

        <div id="registerWrapper">
            <div id="registerBox">
                <div class="form-group">
                    <label for="username">账号：</label>
                    <input type="text" id="username" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input type="password" id="password" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="nickname">名称：</label>
                    <input type="text" id="nickname" placeholder="请输入昵称">
                </div>
                <div class="form-group">
                    <label for="avatar">头像：</label>
                    <input type="file" id="avatar" accept="image/*">
                </div>
                <div class="button-group">
                    <button id="registerBtn">注册</button>
                </div>
                <br>
                <br>
                <div id="registerLinks">
                    <a href="login.html">返回登录</a>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="js/jQuery-3.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        // 页面加载时检测是否已登录
        const token = localStorage.getItem("jwt");
        if (token) {
            alert("您已登录，正在跳转至首页...");
            window.location.href = "home.html"; // 自行替换成你的主页地址
            return;
        }

        function clearForm() {
            $('#username').val('');
            $('#password').val('');
            $('#nickname').val('');
            $('#avatar').val('');
        }

        $('#registerBtn').click(function () {
            // 获取输入框值
            const username = $('#username').val();
            const password = $('#password').val();
            const nickname = $('#nickname').val();
            const avatarFile = $('#avatar')[0].files[0];

            // 前端非空校验
            if (!username || !password || !nickname || !avatarFile) {
                alert('请完整填写所有信息并上传头像！');
                return;
            }

            // 第一步：上传头像
            const formData = new FormData();
            formData.append("file", avatarFile);

            $.ajax({
                url: 'http://localhost:8080/uploadImage',
                type: 'POST',
                data: formData,
                contentType: false,  // 必须
                processData: false,  // 必须
                success: function (res) {
                    if (res.code === 1) {
                        const imgUrl = res.data;

                        // 第二步：提交注册信息
                        const registerData = {
                            user: {
                                username: username,
                                password: password,
                                name: nickname
                            },
                            imgUrl: imgUrl
                        };

                        $.ajax({
                            url: 'http://localhost:8080/register',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify(registerData),
                            success: function (result) {
                                if (result.code === 1) {
                                    alert('注册成功！即将跳转登录页面');
                                    window.location.href = 'login.html';
                                } else {
                                    alert(result.msg || '注册失败');
                                    clearForm()
                                }
                            },
                            error: function (err) {
                                alert('注册请求失败！');
                                console.error(err);
                                clearForm()
                            }
                        });

                    } else {
                        alert(res.msg || '头像上传失败');
                        clearForm()
                    }
                },
                error: function (err) {
                    alert('头像上传请求失败！');
                    console.error(err);
                    clearForm()
                }
            });

        });
    })
</script>
</html>